<template>
    <div id="app" ref="app">
        <transition :name="transitionName">
            <router-view/>
        </transition>
<!--              <router-view />-->
    </div>
</template>

<script>

    export default {
        data() {
            return {
                transitionName: ''  // 想前走或向后走
            }
        },
        created() {
            // 移除 Loding
            document.body.removeChild(document.getElementById('Loading'))
        },
        watch: {
            /*
            * 监听当前路由是向前走还是向后走
            * */
            $route(to, from) {
                // 最开始进入 index 页面的时候不添加过渡效果
                if (to.name === 'index' && from.name === null) {
                    this.transitionName = ''
                    return;
                }
                if (to.meta.index < from.meta.index) {
                    this.transitionName = 'silde-back' // 后退
                } else {
                    this.transitionName = 'silde-go' // 前进
                }
            }
        }
    }
</script>

<style lang="scss">
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        height: 100%;
        /*overflow: auto;*/
        /*position: relative;*/
        font-size: 18px;

        .silde-back-enter-active, .silde-back-leave-active {
            transition: all 300ms ease;
        }
        .silde-back-enter {
            transform: translateX(-100%);
        }
        .silde-back-leave-to {
            opacity: 0;
            /*transform: translateX(100%);*/
            position: absolute;
        }


        .silde-go-enter-active, .silde-go-leave-active {
            transition: all 300ms ease;
        }
        .silde-go-enter {
            transform: translateX(100%);
        }
        .silde-go-leave-to {
            opacity: 0;
            /*transform: translateX(-100px);*/
            position: absolute;
        }
    }
</style>
